<template>
    <div class="RxLayout">
      <div  v-if="$slots.header" class="RxLayout-header">
        <slot name="header" ></slot>
      </div>
      <div v-if="$slots.center" class="RxLayout-center">
        <slot name="center"></slot>
      </div>
      <div v-if="$slots.footer" class="RxLayout-footer">
        <slot name="footer"></slot>
      </div>
    </div>
</template>

<script>
export default {
  name: "RxLayout"
}
</script>

<style scoped>
.RxLayout{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.RxLayout-center{
  flex: 1;
  overflow: auto;
  background:#f4f5f6;
  padding: 0.5rem;
}
.RxLayout-footer{
  background: white;
  padding: 0.5rem;
  box-shadow: 0rem 0rem 0.28rem rgba(42, 89, 163, 0.2);
}
.RxLayout-header{
  background: white;
  padding: 0.5rem;
}
</style>
